<template>
  <el-dialog v-model="visible" :title="'jt809日志列表'" :close-on-click-modal="false">
    <el-table v-loading="loading" :data="dataList" border class="layout-table">
      <el-table-column prop="id" label="ID" header-align="center" align="center"></el-table-column>
      <el-table-column prop="userType" label="方向" header-align="center" align="center"></el-table-column>
      <el-table-column prop="msgId" label="消息ID" header-align="center" align="center"></el-table-column>
      <el-table-column prop="msgDesc" label="描述" header-align="center" align="center"></el-table-column>
      <el-table-column prop="createTime" label="时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="" label="备注" header-align="center" align="center"></el-table-column>
    </el-table>
    <el-pagination
      :current-page="data.page"
      :page-sizes="[10, 20, 50, 100, 200]"
      :page-size="data.limit"
      :total="total"
      layout="total, sizes, prev, pager, next"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle">
    </el-pagination>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { jt809LogList } from '@/api/gps/jt809'
const loading = ref(false)
const dataList = ref([])
const total = ref(0)
const visible = ref(false)
const data = reactive({
  gnssId: 0,
  page: 1,
  limit: 10,
  sort: 'create_time',
  order: 'desc'
})
const init = (id?: number) => {
  visible.value = true
  typeof id === 'number' ? (data.gnssId = id) : undefined
  getDataList()
}

function sizeChangeHandle(val) {
  data.page = 1
  data.limit = val
  getDataList()
}
function currentChangeHandle(val) {
  data.page = val
  getDataList()
}
function getDataList() {
  jt809LogList(data).then((res) => {
    dataList.value = res.data.list
  })
}
defineExpose({
  init
})
</script>
